<template>
  <!-- 操作栏 -->
  <div class="p-2">
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="1.5">
             <el-button type="primary" plain @click="openForm()" icon="Location"> IP 查询 </el-button>
          </el-col>
        </el-row>
      </template>
      <!-- 列表 -->
      <div style="width: 100%; height: 700px">
        <!-- AutoResizer 自动调节大小 -->
        <el-auto-resizer>
          <template #default="{ height, width }">
            <!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
            <!-- <el-table-v2 v-loading="loading" :columns="columns" :data="list" :width="width" :height="height" expand-column-key="id" /> -->
            <el-table
              border
              :width="width"
              :height="height"
              ref="menuTableRef"
              v-loading="loading"
              :data="list"
              row-key="id"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :default-expand-all="false"
            >
              <el-table-column prop="id" label="编号" ></el-table-column>
              <el-table-column prop="name" label="地名" ></el-table-column>
            </el-table>
          </template>
        </el-auto-resizer>
      </div>
    </el-card>
    <!-- 表单弹窗：添加/修改 -->
    <AreaForm ref="formRef" />
  </div>
</template>
<script setup lang="tsx">
import { Column } from 'element-plus';
import AreaForm from './AreaForm.vue';
import { getAreaTree } from '@/api/tearoom/area/index';

defineOptions({ name: 'SystemArea' });
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const menuTableRef = ref<ElTableInstance>();
// 表格的 column 字段
const columns: Column[] = [
  {
    dataKey: 'id', // 需要渲染当前列的数据字段
    title: '编号', // 显示在单元格表头的文本
    width: 400, // 当前列的宽度，必须设置
    fixed: true, // 是否固定列
    key: 'id' // 树形展开对应的 key
  },
  {
    dataKey: 'name',
    title: '地名',
    width: 200
  }
];
const loading = ref(true); // 列表的加载中
const list = ref([]); // 表格的数据

/** 获得数据列表 */
const getList = async () => {
  loading.value = true;
  const res = await getAreaTree();
  const data = proxy?.handleTree<any>(res.data, 'id');
  if (data) {
    list.value = data;
  }
  loading.value = false;
};

/** 添加/修改操作 */
const formRef = ref();
const openForm = () => {
  formRef.value.open();
};

/** 初始化 **/
onMounted(() => {
  getList();
});
</script>
